import { Menu } from 'antd';
// 引入icon图标
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

import type { MenuProps } from 'antd';

import { history } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

// 权限
/*
  1. 登录成功，后端直接返回一个数组，前端直接进行列表渲染

  2. 后端返回一个标记，表示是超级管理员、普通管理员、一般用户
      每一级对应一种数组

  3. 后端返回一个数组，根据数组有哪几项，渲染对应的那几项的列表
*/
export const menus = [
  {
    title: 'excel和文件上传',
    key: '/excel',
    icon: <PieChartOutlined />,
    auth: 1,
  },
  {
    title: '首页',
    key: '/welcome',
    icon: <PieChartOutlined />,
    auth: 1,
  },
  {
    title: 'UI',
    key: 'sub1',
    icon: <UserOutlined />,
    children: [
      {
        title: '按钮',
        key: '/ui/buttons',
      },
      {
        title: '弹框',
        key: '/ui/modals',
      },
      {
        title: 'Loading',
        key: '/ui/loading',
      },
    ],
    auth: 2,
  },
  {
    title: '表单',
    key: 'sub2',
    icon: <UserOutlined />,
    children: [
      {
        title: '登录',
        key: '/form/login',
      },
      {
        title: '弹框',
        key: '/form/reg',
      },
    ],
    auth: 3,
  },
  {
    title: '表格',
    key: 'sub3',
    icon: <PieChartOutlined />,
    children: [
      {
        title: '基础表格',
        key: '/table',
      },
    ],
    auth: 4,
  },
  {
    title: '城市管理',
    key: '/city',
    icon: <PieChartOutlined />,
    auth: 5,
  },
  {
    title: '城市管理2',
    key: '/city2',
    icon: <PieChartOutlined />,
    auth: 6,
  },
  {
    title: '地图',
    key: '/map',
    icon: <PieChartOutlined />,
    auth: 7,
  },
  {
    title: '富文本',
    key: '/rich',
    icon: <PieChartOutlined />,
    auth: 8,
  },
];

const Index = () => {
  const auth = JSON.parse(localStorage.getItem('auth') || '[]');
  // [1,2,3,4,5,6]

  // items是用来做菜单的,不能直接写死，根据权限遍历得到的
  // const items: MenuItem[] = [
  //   getItem('首页', '/welcome', <PieChartOutlined />),
  //   getItem('UI', 'sub1', <UserOutlined />, [
  //     getItem('按钮', '/ui/buttons'),
  //     getItem('弹框', '/ui/modals'),
  //     getItem('Loading', '/ui/loading'),
  //   ]),
  //   getItem('表单', 'sub2', <TeamOutlined />, [
  //     getItem('登录', '/form/login'),
  //     getItem('注册', '/form/reg'),
  //   ]),
  //   getItem('表格', 'sub3', <TeamOutlined />, [getItem('基础表格', '/table')]),
  //   getItem('城市管理', '/city', <TeamOutlined />),
  //   getItem('城市管理2', '/city2', <TeamOutlined />),
  //   getItem('地图', '/map', <TeamOutlined />),
  //   getItem('富文本', '/rich', <TeamOutlined />),
  // ];

  const items: any = menus.map((item) => {
    if (auth.includes(item.auth)) {
      return getItem(
        item.title,
        item.key,
        item.icon,
        item.children
          ? item.children.map((val) => {
              return getItem(val.title, val.key);
            })
          : undefined,
      );
    } else {
      return undefined;
    }
  });
  // ts的类型不知道的时候，可以考虑在官网的文档找一下
  const menuClick: MenuProps['onClick'] = ({ key }) => {
    // 路由跳转
    history.push('/home' + key);
  };

  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={['1']}
      mode="vertical"
      items={items}
      onClick={menuClick}
    />
  );
};

export default Index;
